<template>
  <view>
    <view class="navi">
      <view class="f_item" @tap="$xyfun.to('/pages/index')">
        <image src="/static/tab/tab_index_act.png" v-if="cur_url==='index'"></image>
        <image src="/static/tab/tab_index.png" v-else></image>
        <text>{{common.tabConfig.tab_index_tit}}</text>
      </view>
      <view class="f_item" @tap="$xyfun.to('/pages/course_list')" v-if="common.appConfig.appmodel==0">
        <image src="/static/tab/tab_course_act.png" v-if="cur_url==='course'"></image>
        <image src="/static/tab/tab_course.png" v-else></image>
        <text>{{common.tabConfig.tab_course_tit}}</text>
      </view>
      <view class="f_item" @tap="$xyfun.to('/pages/shop')">
        <image src="/static/tab/tab_shop_act.png" v-if="cur_url==='shop'"></image>
        <image src="/static/tab/tab_shop.png" v-else></image>
        <text>{{common.tabConfig.tab_shop_tit}}</text>
      </view>
      <view class="f_item" @tap="$xyfun.to('/pages/user')" v-if="common.appConfig.hide_my==0">
        <image src="/static/tab/tab_user_act.png" v-if="cur_url==='user'"></image>
        <image src="/static/tab/tab_user.png" v-else></image>
        <text>{{common.tabConfig.tab_my_tit}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "xyFlower",
  props: {
    cur_url : {
      type: String,
      default: ""
    }
  },
  computed: {
    ...mapState(['common', 'user'])
  },
  data() {
    return {
    }
  },
  created() {
  },
  methods:{

  }
}
</script>


<style scoped lang="scss">
.navi{
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  padding: 15rpx 10rpx;
  box-sizing: border-box;
  align-items: flex-end;
  .f_item{
    width: 20%;
    text-align: center;
    image{
      width: 50rpx;
      height: 50rpx;
    }
    text{
      margin-top: 5rpx;
      display: block;
      font-size: 24rpx;
    }
  }
  .y_item{
    width: 20%;
    text-align: center;
    position: relative;
    image{
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      bottom: 45rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
    }
    text{
      margin-top: 5rpx;
      display: block;
      font-size: 26rpx;
    }
  }
}

</style>
